<!-- 热度 -->
<template>
	<view class="hotList">
		<view>
			<view class="view-tab">
				<view v-for="item of options" :key="item.id" class="tab-item font14 bold" @click="handleClick(item.id)" :class="chooseType==item.id?'font16':'font14'"> {{item.title}} </view>	
				<view class="bg" :class="chooseType==2?'left1':chooseType==3?'left2':chooseType==4?'left3':''"></view>
			</view>
		</view>
		<view class="pageContent">
			<!-- 热门大学 -->
			<hotSchool ref="hotSchoolPage" v-show="chooseType == 1"></hotSchool>
			<!-- 热门专业 -->
			<hotMajor ref="hotMajorPage" v-show="chooseType == 2"></hotMajor>
			<!-- 考试科目 -->
			<hotSubject ref="hotSubjectPage" v-show="chooseType == 3"></hotSubject>
			<!-- 研究方向 -->
			<hotDirection ref="hotDirectionPage" v-show="chooseType == 4"></hotDirection>
		</view>
	</view>
</template>
<script>
	import { bindingRelationship } from "@/api/toolbox.js"
	import hotSchool from './components/hotSchool/hotSchool.vue';
	import hotMajor from './components/hotMajor/hotMajor.vue';
	import hotSubject from './components/hotSubject/hotSubject.vue';
	import hotDirection from './components/hotDirection/hotDirection.vue';
	export default {
		components:{
			hotSchool,
			hotMajor,
			hotSubject,
			hotDirection
		},
		data() {
			return {
				chooseType: 1,//1、热门大学，2、热门专业，3、考试科目，4、研究方向
				options: [
					{id: 1,title: '热门大学'},
					{id: 2,title: '热门专业'},
					{id: 3,title: '考试科目'},
					{id: 4,title: '研究方向'},
				],
			}
		},
		onLoad(options) {
			this.chooseType = 1;
			// this.handleClick();
			// uni.setStorageSync('flowId', '1646696505421201408'); //推广员id
			// uni.setStorageSync('schoolCode',options.schoolCode);
			// uni.setStorageSync('schoolCode', '10001');
		},
		methods: {
			/**
			 * tab 点击事件
			 * @param {Object} type 1、大学，2、专业，3、就业形式
			 */
			handleClick(type){
				if(this.chooseType == type) return
				this.chooseType = type;
				if(type == 1){
					this.$nextTick(() => {
						setTimeout(() => {
							this.$refs.hotSchoolPage.getData();
						}, 300)
					})
					return;
				}
				if(type == 2){
					this.$nextTick(() => {
						setTimeout(() => {
							this.$refs.hotMajorPage.getData();
						}, 300)
					})
					
					return;
				}
				if(type == 3){
					this.$nextTick(() => {
						setTimeout(() => {
							this.$refs.hotSubjectPage.getData();
						}, 300)
					})
					
					return;
				}
				if(type == 4){
					this.$nextTick(() => {
						setTimeout(() => {
							this.$refs.hotDirectionPage.getData();
						}, 300)
					})
					
					return;
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
	.hotList{
		border-top: 1px solid #f2f2f2;
		.view-tab{
			display: flex;
			align-items: center;
			justify-content: center;
			top: 0px;
			height: 90rpx;
			width: 100%;
			z-index: 999;
			background: #ffffff;
			
			.tab-item{
				width: 150rpx;
				height: 80rpx;
				line-height: 80rpx;
				color: #000000;
				// padding: 10px;
				text-align: center;
			}
		}
		
		.bg{
			position: absolute;
			left: 114rpx;
			margin-top: 80rpx;
			z-index: 1;
			width: 80rpx;
			height: 8rpx;
			background: #FDE080;
			transition: all .5s;
			z-index: 9999;
		}
		.left1{
			left: 264rpx;
		}
		.left2{
			left: 414rpx;
		}
		.left3{
			left: 560rpx;
		}
		
		.pageContent{
			// margin-top: 90rpx;
		}
	}
	
</style>
